<template>
  <div>
<!--    <el-row>
      <el-col :span="6">
        <div style="width: 100%; height: 300px; background-color: dodgerblue"></div>
      </el-col>
      <el-col :span="12">
        <div style="width: 100%; height: 300px; background-color: red"></div>
      </el-col>
    </el-row>-->
<!--    <el-row>
      <el-col :span="6">
        <div style="padding: 10px; border: 1px solid #ccc; text-align: center">
          <img src="@/assets/logo.png" style="width: 100%;" alt="">
          <div style="text-align: center">114514</div>
          <div style="color: red">价格 $1919810</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; height: 300px;"><img src="@/assets/logo.png" alt=""></div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; height: 300px;"><img src="@/assets/logo.png" alt=""></div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; height: 300px;"><img src="@/assets/logo.png" alt=""></div>
      </el-col>
    </el-row>-->
<!--    <el-row>
      <el-col :spen="6">
        <el-button>Element按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-button plain>Element按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>-->

<!--    <el-row style="margin-top: 20px">
      <el-col>

      </el-col>
    </el-row>-->
    <el-row>
      <el-col>
        <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>
        <el-input style="width: 200px" v-model="value1" placeholder="请输入内容"></el-input>
        <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>


        <el-input clearable="" style="width: 200px" v-model="password" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
        <el-button>搜索</el-button>


      </el-col>

    </el-row>
    <el-row style="margin-top: 20px">
      <el-autocomplete v-model="value3" style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch" :trigger-on-focus="false"></el-autocomplete>
    </el-row>

    <el-row>
      <el-select v-model="select" @change="changeSelect">
        <el-option value="香蕉"></el-option>
        <el-option value="橘子"></el-option>
        <el-option value="苹果"></el-option>
      </el-select>
    </el-row>

    <el-row>
      <el-select v-model="select1" @change="changeSelect" multiple="">
        <el-option v-for="item in fruits" :key="item.id" :value="item.name"></el-option>
      </el-select>
    </el-row>

    <el-row>
      <el-select v-model="select2" @change="changeSelectUser" filterable="">
        <el-option v-for="item in users" :key="item.card" :label="item.label" :value="item.card"></el-option>
      </el-select>
    </el-row>

  <el-row>
    <el-radio-group v-model="radio" @change="selectRadio">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-row>

    <el-row>
      <el-checkbox-group v-model="checkList" @change="selectCheckBox">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
      </el-checkbox-group>

    </el-row>

    <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy--MM--dd" @change="changeDate"></el-date-picker>
    <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" value-format="yyyy--MM--dd HH:mm:ss" @change="changeDatetime"></el-date-picker>

    <el-date-picker v-model="daterange" type="daterange"
                    value-format="yyyy--MM--dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" @change="changeDateRange">
    </el-date-picker>

    <el-table :data="tableData" border :header-cell-style="{ background: 'aliceblue', fontSize: '16px' }">
      <el-table-column label="序号" prop="id" align="center"></el-table-column>
      <el-table-column label="名称" prop="name" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" align="center"></el-table-column>
      <el-table-column label="地址" prop="address" align="center"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>


</template>
<script>
export default {
  name: 'Element',
  data(){
    return{
      tableData: [
        { name: '青哥哥', address: '安徽省合肥市', id: 1, age: '30' },
      ],
      value: '',
      value1: '',
      value3: '',
      password: '',
      coffees: [ { value: '1.星巴克咖啡' }, { value: '2.瑞幸咖啡' }, { value: '3.库底咖啡' }],
      select: '',
      select1: '',
      select2: '',
      fruits: [
        { name: '苹果', id: 1},
        { name: '橘子', id: 2},
        { name: '香蕉', id: 3},
        { name: '青哥哥', id: 4},
      ],
      users: [
        {label: '青哥哥', card: '123123123123'},
        {label: '琴小哥哥', card: '114514114514'},
        {label: '青大哥哥', card: '191981019198'},
      ],
      radio: '',
      checkList: [],
      date: '',
      datetime: '',
      daterange: '',

    }
  },
  methods: {
    edit(row){
      // alert(row.name)
      // this.$message.success(row.name)
      // this.$message.warning(row.name)
      // this.$notify.success(row.name)
      this.$confirm('这是什么个玩意儿？', '提示', {
        type: 'warning'
      }).then(res => {
        this.$message.success("ok 我点击了确认")
      }).catch(() => {
        this.$message.warning("ok 我点击了取消")
      })    },
    querySearch(query, cb){ //cb: callback
      let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      console.log(result)
      cb(result)
    },
    changeSelect(){
      console.log(this.select)
    },
    changeSelectUser(){
      console.log(this.select2)
    },
    selectRadio(){
      alert('你选择的是：'+this.radio)
    },
    selectCheckBox(){
      console.log(this.checkList)
    },
    changeDate(){
      console.log(this.date)
    },
    changeDatetime(){
      console.log(this.datetime)
    },
    changeDateRange(){
      console.log(this.daterange)
    }
  }
}
</script>